<template>
	<view class="container">
		<view class="addressList">
			<view class="addressItem" v-for="(address,index) in addressList" :key="address._id">
				<view class="nameOrMobile">
					<text>{{address.name}}</text>
					<text>{{address.tel}}</text>
				</view>
				<view class="text">{{address.addr_text + address.detail}}</view>
				<view class="option">
						<view class="radio" :class="{car: address.is_default}" >
							<view class="radioT" @click="changeDefault(address._id,address.is_default)">
								<view class="iconfont icon-duihao"></view>
							</view>
							<text>默认地址</text>
						</view>
						<view @click="editAddress(address)">
							<text class="iconfont icon-edit"></text>
							<text>编辑</text>
						</view>
						<view @click="deleteAddress(address._id, index)">
							<text class="iconfont icon-delete1"></text>
							<text>删除</text>
						</view>
				</view>
			</view>
		</view>
		
		<u-modal v-model="show" :show-cancel-button="true" confirm-color="red" @confirm="confirm"  content="你确定要删除吗"></u-modal>
		<view class="footer">
			<image v-if="addressList.length <= 3" src="../../static/images/common/1671846443909.png"></image>
			<u-button @click="navTo('/pages/deliveryAddress/addAddress')" :custom-style="{color: '#fddb35',border:'none',outline:'none',fontSize: '30rpx'}"><u-icon name="plus"></u-icon> 添加收货地址</u-button>
		</view>
	</view>
</template>

<script setup>
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { ref,reactive } from 'vue'
	import { userStore } from '@/stores/userInfo/userInfo'
	import { order } from '@/api'
	let addressList = ref([])
	let uid = ref('')
	let show = ref(false)
	let params= reactive({
		uid: '',
		_id: ''
	})
	onShow(() => {
		let user = userStore()
		uid.value = params.uid = user.userInfo._id
		getAddressList()
	})
	// 修改默认地址
	function changeDefault(_id, flag) {
		if(flag) {
			return
		}
		let defaultParams = {
			_id,
			uid: uid.value
		}
		order.reqSetDefaultAddress(defaultParams).then(() => {
			uni.$u.toast('修改成功')
			getAddressList()
		})
	}
	
	// 修改地址
	function editAddress(address){
		let data = encodeURI(JSON.stringify(address))
		uni.navigateTo({
			url: `/pages/deliveryAddress/addAddress?address=${data}`
		})
	}
	// 点击确认删除
	function confirm() {
		order.deleteAddress(params).then(res => {
			if(res.code === 1){
				getAddressList()
			}
		})
	}
	function deleteAddress(_id,index) {
		show.value = true
		params = {
			_id,
			uid: uid.value
		}
	}
	// 获取地址列表
	async function getAddressList() {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		try{
			let res = await order.reqAddressList({ uid: uid.value })
			if(res.code === 1) {
				addressList.value = res.data
				uni.hideLoading()
			}
		}catch (err){
			uni.$u.toast('未登录，请去登录')
		}
	}
	
	function navTo(url){
		uni.navigateTo({
			url
		})
	}
	
</script>

<style lang="scss">
	::v-deep .u-hairline-border::after{
		border: none;
	}
	.container{
		height: calc(100vh - 85rpx);
		background-color: #f6f6f6;
		padding-bottom: 100rpx;
		overflow: scroll;
		.addressList{
			padding: 30rpx 20rpx;
			.addressItem{
				padding: 15rpx 0;
				padding-bottom: 0;
				background-color: #ffffff;
				border-radius: 15rpx;
				box-shadow: 0 0 10px #eee , 0 0 10px rgba(0,0,0,0.1);
				margin-bottom: 15rpx;
				.nameOrMobile{
					font-size: 30rpx;
					text:first-child{
						margin: 0 15rpx;
					}
				}
				.text{
					font-size: 30rpx;
					margin: 15rpx;
					color: #bbc0c1;
				}
				.option{
					@include flex1(space-between,);
					padding: 15rpx ;
					border-top: 1rpx dashed #bbc0c1;
					.radio{
						.radioT{
							width: 30rpx;
							height: 30rpx;
							border: 1rpx solid #ccc;
							border-radius: 50%;
							margin-right: 15rpx;
						}
						.iconfont{
							display: none;
						}
						&.car{
							.radioT{
								background-color: #fddb35;
								border:none;
							}
							.iconfont{
								display: block;
								color: #fff;
								margin: 0 auto;
								font-size: 10rpx;
							}
						}
					}
					view{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
						font-weight: 550;
						.iconfont{
							margin-right: 5rpx;
						}
					}
				}
			}
		}
		.footer{
			padding: 15rpx 60rpx;
			text-align: center;
			image{
				width: 150rpx;
				height: 110rpx;
			}
		}
	}
</style>
